<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" v-auth="'merchant.add'" @click="add"></el-button>
				<el-button type="danger" plain icon="el-icon-delete" v-auth="'merchant.delete'" :disabled="selection.length == 0" @click="batch_del"></el-button>
				<el-button type="primary" plain :disabled="selection.length == 0" @click="set_password">密码重置</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.keyword" placeholder="登录账号 / 姓名" clearable @keyup.enter="upsearch"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter @cell-dblclick="cellClick">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="ID" prop="id" width="80" sortable='custom'></el-table-column>
				<el-table-column label="头像" width="80" align="center">
					<template #default="scope">
						<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="商户名称" prop="shop_name" align="center"></el-table-column>
				<el-table-column label="手机号" prop="account" align="center"></el-table-column>
				<el-table-column label="联系人" prop="name" align="center"></el-table-column>
				<el-table-column label="员工数量" prop="shop_staff_count" align="center"></el-table-column>
				<el-table-column label="状态" prop="disable" align="center" width="100" v-column="'status.status'">
					<template #default="scope">
						<el-switch v-model="scope.row.disable" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="0" inline-prompt active-text="启用" :inactive-value="1" inactive-text="禁用"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="到期时间" prop="shop_expire_date" align="center"></el-table-column>
				<el-table-column label="备注" prop="remark" width="170">
					<template #default="scope">
						<div class="input-box">
							<el-input size="mini" v-model="scope.row.remark" v-if="scope.row.flag" @blur="inputClick(scope.row, 'remark')" :ref="`remark` + scope.row.id"></el-input>
							<span v-if="!scope.row.flag">{{ scope.row.remark }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="250">
					<template #default="scope">
						<div class="buttonFlex">
							<!-- <el-button type="primary" size="small" @click="table_show(scope.row, scope.$index)">代管</el-button> -->
							<el-popconfirm title="此操作将一键登录至商户账号,确定继续吗?" @confirm="table_esc(scope.row, scope.$index)" :width="200">
								<template #reference>
									<el-button type="warning" size="small" v-auth="'merchant.escrow'">代管</el-button>
								</template>
							</el-popconfirm>
							<el-button type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'merchant.show'">查看</el-button>
							<el-button type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'merchant.edit'">编辑</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button type="danger" size="small" v-auth="'merchant.delete'">删除</el-button>
								</template>
							</el-popconfirm>
							<!-- <el-popconfirm title="确定禁用吗？" @confirm="table_status(scope.row)">
                                <template #reference>
                                    <el-button type="danger" size="small" v-auth="'merchant.disabled'">禁用</el-button>
                                </template>
                            </el-popconfirm> -->
							<!-- <el-popconfirm title="确定清空数据吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button type="danger" size="small" v-auth="'merchant.remove'">清空数据</el-button>
                                </template>
                            </el-popconfirm> -->
						</div>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
	<save-password v-if="dialog.pwd" ref="savePassword" @success="handleSuccess" @closed="dialog.save = false"></save-password>
</template>

<script>
import saveDialog from './save'
import savePassword from './set_password'

export default {
	name: '商户列表',
	components: {
		saveDialog,
		savePassword
	},
	data() {
		return {
			dialog: {
				save: false,
				pwd: false
			},
			apiObj: this.$API.system.admin_shop.list,
			selection: [],
			search: {
				keyword: null
			}
		}
	},
	methods: {
		cellClick(row) {
			row.flag = true
		},
		async inputClick(row) {
			row.flag = false

			// if (row.d_price < row.product.cost_price) {
			// 	this.$message.error("合约价不得低于BOM价");
			// 	return false;
			// }
			var reqData = {}
			reqData = { id: row.id, remark: row.remark };

			var res = await this.$API.system.admin_shop.update_remark.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$message.success("修改成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		set_password() {
			var admin_ids = [];
			this.selection.forEach((item) => {
				admin_ids.push(item.id)
			})
			this.dialog.pwd = true
			this.$nextTick(() => {
				this.$refs.savePassword.open("set_password").setData({ ids: admin_ids })
			})
		},
		set_role() {
			var admin_ids = [];
			this.selection.forEach((item) => {
				admin_ids.push(item.id)
			})
			this.dialog_role.save = true
			this.$nextTick(() => {
				this.$refs.saveRole.open("set").setData({ ids: admin_ids })
			})
		},
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
		//查看
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
		//删除
		async table_del(row) {
			var reqData = { id: row.id }
			var res = await this.$API.system.admin_shop.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**状态切换 */
		async changeSwitch(val, row) {
			row.$switch_status = true;
			var res = await this.$API.system.admin_shop.update_disable.post({
				id: [row.id],
				disable: row.disable,
			});
			if (res.code == 1) {
				row.$switch_status = false;
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		async table_del_all(delete_ids) {
			var reqData = { ids: delete_ids }
			var res = await this.$API.system.admin_shop.deleteAll.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//批量删除
		async batch_del() {
			var delete_ids = [];
			this.selection.forEach((item) => {
				delete_ids.push(item.id)
			})
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(() => {
				this.table_del_all(delete_ids)
			}).catch(() => {

			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			} else if (mode == 'set_password') {
				this.$refs.table.refresh()
			}
		},
		/**代管 -- 一件登录至商户账号 */
		table_esc(row) {
			var reqData = { shop_id: row.id }
			this.$API.system.admin_shop.login.post(reqData).then((res) => {
				if (res.code == 1) {
					this.$TOOL.cookie.set("TOKEN", res.data.token)
					this.$TOOL.data.set("USER_INFO", res.data.userInfo)
				} else {
					this.$alert(res.message, "提示", { type: 'error' })
				}
				this.$API.system.menu.myMenus.get().then((menu) => {
					if (menu.code == 1) {
						if (menu.data.userInfo.is_shop == 1 && menu.data.userInfo.shop_id != 0 && menu.data.userInfo.jobs_id.length == 0) {
							this.$alert("当前用户未设置岗位权限，请联系系统管理员", "提示", { type: 'error' })
							return false
						}
						if (menu.data.menu.length == 0) {
							this.islogin = false
							this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
								type: 'error',
								center: true
							})
							return false
						}
						this.$TOOL.data.set('admincolumn', menu.data.admincolumn)
						this.$TOOL.data.set("MENU", menu.data.menu)
						this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
						this.$TOOL.data.set("COLUMNSAUTH", menu.data.columnsauth)
						this.$TOOL.data.set("DASHBOARDGRID", menu.data.dashboardGrid)
						// this.$TOOL.data.set("USER_INFO", menu.data.userInfo)
					}
					this.$router.replace({
						path: this.$TOOL.data.get("DASHBOARD_URL")
					}).then(() => {
						window.location.reload()
					})
				})
			})

		},
	}
}
</script>

<style></style>
